/*
 * @Description: useMemo使用示例 - 商品价格计算器
 * @Author: ZhangHan
 * @Date: 2025-02-06 17:19:51
 * @LastEditTime: 2025-04-09 16:55:35
 * @LastEditors: ZhangHan
 */
import { useState, useMemo } from "react";
import { InputNumber, Space, Select } from "antd";

function MineSkill() {
  const [price, setPrice] = useState(100);
  const [quantity, setQuantity] = useState(1);
  const [discount, setDiscount] = useState(0.9); // 默认9折

  //theme变化不会触发重新渲染
  const [theme, setTheme] = useState<string>("theme");

  // 没有使用useMemo - 每次渲染都会重新计算（性能低）
  // const total = price * quantity * discount;

  // 使用useMemo优化 - 只有当price/quantity/discount变化时才重新计算
  const total = useMemo(() => {
    console.log("正在重新计算总价..."); // 用于演示计算过程
    return price * quantity * discount;
  }, [price, quantity, discount]);

  // 另一个useMemo示例：格式化显示价格
  const formattedPrice = useMemo(() => {
    return `¥${total.toFixed(2)}`;
  }, [total]);

  //select选项
  const options = [
    {
      value: "1",
      label: "无折扣",
    },
    {
      value: "0.9",
      label: "9折",
    },
    {
      value: "0.8",
      label: "8折",
    },
    {
      value: "0.7",
      label: "7折",
    },
  ];

  const defaultValue = useMemo(() => {
    // return
    const index = options.findIndex((item) => item.value == String(discount));
    return options[index].value;
  }, [discount]);

  return (
    <div className="p-4 max-w-md mx-auto">
      <h1 className="text-center mb-6 text-xl font-bold">useMemo使用示例</h1>

      <div className="space-y-4">
        <div className="flex items-center">
          <label className="w-24">单价：</label>
          <InputNumber
            defaultValue={price}
            onChange={(val) => setPrice(Number(val))}
            className="border p-2 flex-1"
            min={88}
          />
        </div>

        <div className="flex items-center">
          <label className="w-24">数量：</label>
          <InputNumber
            defaultValue={quantity}
            onChange={(val) => setQuantity(Number(val))}
            className="border p-2 flex-1"
            min={1}
          />
        </div>

        <div className="flex items-center">
          <label className="w-24">折扣：</label>
          <Select
            showSearch
            className="flex-1"
            placeholder="请选择折扣"
            optionFilterProp="label"
            options={options}
            onSelect={(val, opt) => setDiscount(Number(val))}
            defaultValue={defaultValue}
          ></Select>
        </div>

        <div className="mt-6 p-4 bg-gray-100 rounded">
          <h2 className="font-semibold">计算结果：</h2>
          <p>单价：¥{price.toFixed(2)}</p>
          <p>数量：{quantity}</p>
          <p>折扣：{discount < 1 ? discount * 10 : "1"}折</p>
          <p className="mt-2 text-lg font-bold">总价：{formattedPrice}</p>
        </div>

        <div
          className="text-sm text-gray-500"
          onClick={() => setTheme(theme + "a")}
        >
          <p>{theme}</p>
        </div>
        <div className="text-sm text-gray-500">
          <p>打开控制台查看计算日志，修改无关状态时不会重新计算。</p>
        </div>
      </div>
    </div>
  );
}

export default MineSkill;
